import React, { Component } from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';

import { Button, WhiteSpace, WingBlank, List, InputItem } from 'antd-mobile';

// 引入自定义组件
import Logo from '../../component/logo/logo';
// 引入外部文件
import {loginFunction} from '../../redux/registerRedux';
import {saltMd5} from '../../util';

class Login extends Component {
    constructor() {
        super();
        this.state = {
            user:'',
            pass:''
        }
    }
    render() {
        return (
            <div>
                {this.props.redirect && this.props.redirect !== '/login'?<Redirect to={this.props.redirect} />:null}
                <WhiteSpace />
                <Logo></Logo>
                <WingBlank>
                    <WhiteSpace />
                    <List>
                        {this.props.msg?<p style={{color:'red'}}>{this.props.msg}</p>:null}
                        <InputItem placeholder="请输入用户名" onChange={(val) => this.onChange('user',val)} >用户名</InputItem>
                    </List>
                    <WhiteSpace />
                    <List>
                        <InputItem type='password' placeholder="请输入密码" onChange={(val) => this.onChange('pass',val)} >密  码</InputItem>
                    </List>
                    <WhiteSpace />
                    <Button type="primary" onClick={this.login}>登录</Button><WhiteSpace />
                    <Button type="primary" onClick={this.toRegister}>注册</Button><WhiteSpace />
                </WingBlank>
            </div>
        );
    };
    toRegister = () => {
        console.log(this.props);
        this.props.history.push('/register');
    };
    onChange = (key,value) => {
        this.setState({
            [key]:value
        });
    };
    login = () => {
        console.log(this.state);
        this.props.loginFunction({...this.state,pass:saltMd5(this.state.pass)});
    }
}
const mapStateToProps = (state) => {
    console.log(state);
    return {
        msg:state.registerReducer.msg,
        redirect:state.registerReducer.redirectTo
    }
}
const mapDispatchToProps = {loginFunction};
export default connect(mapStateToProps,mapDispatchToProps)(Login);